body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    background-image: var(--bg-cl)
}
.no-hidden-block {display: block !important}
.text-deco-under:hover {
    cursor: pointer;
    text-decoration: underline
}
/* ———— */

/* 下拉按钮 & 下拉菜单 & 下拉条目 | Dropdown & Menu & Item */
div.dropdown {margin-bottom: 1rem}
div.dropdown:hover img.icon {filter: blur(0)}
div.dropdown > div.menu {
    right: -1vw;
    max-height: 0;
    margin-top: .4rem;
    border-width: 0 !important;
    color: var(--default-text-cl);
    background-color: var(--main-bg-cl);
    backdrop-filter: blur(3px);
    transition: .6s;
    overflow: hidden;
    z-index: 10;
}
div.dropdown:hover div.menu {
    border-width: 1px !important;
    max-height: 100vh
}
div.menu > div.item {
    padding: 2px .4rem;
    border-bottom: solid 2px var(--separator-cl);
    user-select: none;
    cursor: pointer;
    transition: .2s
}
div.menu > div.item:last-child {border: none}
div.menu > div.item:hover {
    color: white;
    background-color: #666
}
div.menu > div.item:active {background-color: #333}
/* ———— */

/* Main */
#main {
    width: 90vw;
    height: 84vh;
    margin: 4vh 0 0 5vw;
    border-radius: .6rem;
    background-color: var(--main-bg-cl);
    transition: .8s;
    contain: content
}
/* ———— */

/* 导航栏 | Navbar */
nav.navbar {
    position: relative;
    padding: .5rem 1rem;
    background-color: var(--navbar-bg-cl);
    z-index: 1;
    box-shadow: 0 .5rem 1rem -2px var(--dark-shadow-cl)
}
nav.navbar .icon {filter: none}
img.navbar-brand {height: 2.5rem}
img.navbar-brand, div.navbar-brand, a.nav-link {user-select: none}
div.navbar-brand {color: var(--default-text-cl)}
ul.nav-pills {align-items: center}
a.nav-link {
    padding: .5rem .75rem;
    outline: none;
    cursor: pointer
}
div.nav-sep { /* nav separator */
    width: 3px;
    height: 1.8rem;
    background-color: var(--nav-link-cl)
}
a.nav-link {
    font-size: .9rem;
    color: var(--nav-link-cl)
}
a.nav-link:hover {color: var(--nav-link-hover)}
/* ———— */

/* 用户图像 | User imgs */
div.user-imgs {
    position: relative;
    width: 85%;
    max-height: 500px;
    border-radius: 0 0 .4rem .4rem
}
@media screen and (min-width: 800px) and (max-width: 999px) {
    div.user-imgs {border-radius: 0 0 .6rem .6rem}
}
@media screen and (min-width: 1560px) {
    div.user-imgs {
        max-height: 720px;
    }
}

#user-avatar { /* 用户头像 */
    left: 2rem;
    bottom: 1rem;
    width: 16%
}
#user-background { /* 用户背景图 */
    margin-top: -15%;
    margin-bottom: -15%
}
#main-scroll div.mask { /* 用户头像蒙版 */
    left: 0;
    bottom: 0;
    box-shadow: 0 0 2rem var(--light-shadow-cl) inset
}
/* ———— */

/* 滚动 | Scroll */
#main-scroll {padding: 0 1rem}
@media screen and (min-width: 800px) {
    #main-scroll {padding: 0 1.5rem}
}
h4.scroll-title {
    margin: 1rem 0 0;
    padding: .2rem .75rem;
    border-radius: .3rem .3rem 0 0 !important;
    cursor: default !important
}
h4.scroll-title:hover {background-color: var(--btn-hover-bg-cl)}
#main-scroll div.scroll-sep {
    height: 3px;
    margin-bottom: 1rem;
    background-color: var(--btn-hover-bg-cl)
}

div.scroll-content {
    display: flex;
	justify-content: space-around;
	flex-wrap: wrap
}
div.scroll-content:last-child {
    margin-bottom: 2rem;
}
div.scroll-item {
    width: 120px;
	max-width: 14vw;
    min-width: 80px;
	margin: 0 .4rem 1rem;
	overflow: hidden
}
@media screen and (min-width: 800px) {
    div.scroll-item {margin: 0 .6rem 1rem}
}
@media screen and (min-width: 1560px) {
    div.scroll-item {
        width: 160px;
        margin: 0 1rem 1rem
    }
}

div.item-img {
    position: relative;
    width: 100%
}
div.item-img > img.icon-play { /* 播放按钮 */
    position: absolute;
    bottom: 0;
	right: 0;
    height: 5vw !important;
	max-height: 44px;
    padding: .1rem;
    filter: none !important;
    background-color: #333;
    border-radius: .6rem 0 0 0
}

div.scroll-item > p.item-name { /* 条目名 */
    width: 100%;
    margin: 0;
	padding: .1em .4em;
	color: white;
	background-color: rgba(51, 51, 51, .45);
	cursor: pointer
}
div.scroll-item > p.item-name:hover {text-decoration: underline}

/* 每日推荐 | Recommends */
div.recommend {
    flex-direction: column;
    height: 120px;
    max-height: 14vw
}
@media screen and (min-width: 1560px) {
    div.recommend {
        height: 160px;
    }
}
#date-month { /* 月份 | Month */
    background-color: hsl(0, 20%, 60%)
}
div.date-day-outer {
    flex: auto;
    background-color: rgba(255, 255, 255, .85)
}
#date-day { /* 日期 | Date */
    top: 50%;
    transform: translateY(-50%); /* 文本竖直居中 */
    width: 100%;
    margin: auto;
    font-size: 3.6vw
}
/* ———— */

/* 分页 | Pagination */
li.page-item {cursor: pointer}
a.page-link {user-select: none}
/* ———— */
